<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Layer Styles</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
    <div id="main" class="box vertical flex">
        <span id="codeBoxToggle">CSS Code</span>
        <div id="workspace" class="box vertical flex">
            <div id="overlay"></div>
            <canvas id="innerShadow_universe"></canvas>
            <canvas id="parallel_universe"></canvas>
            <div id="background_layer" class="flex"></div>
            <div id="layer"><div id="resize" class="resize"></div></div>
        </div> <!-- /workspace -->
        <div id="codeBox" class="paper">
            <div class="dragger y"><div class="dragBox"></div></div>
            <div class="body">
                <div class="scroll paper">
                    <div id="copyCode">copy</div>
                    <div id="colorSwitch" class="toggle">
                        <div class="slidePanel">
                            <span class="left">rgb</span><span class="button"></span><span class="right">hex</span>
                        </div>
                    </div>
                    <code></code>
                </div>
            </div>
        </div> <!-- /codeBox -->
    </div> <!-- /main -->
    <div id="layerstyle">
		<div id="headerBg"></div>
		<div id="dialog" class="window">
			<div class="head moveable">
				<h2>Layer Style</h2>
			</div>
			<div class="body">
	       		<div class="main">
	                <div id="nav">
	                    <ul>
	                        <li>Styles</li>
	                        <li class="nav-dropShadow active"><input type="checkbox" checked="checked">Drop Shadow</li>
	                        <li class="nav-innerShadow"><input type="checkbox">Inner Shadow</li>
	                        <li class="nav-background"><input type="checkbox" checked="checked">Background</li>
	                        <li class="nav-border"><input type="checkbox" checked="checked">Border</li>
	                        <li class="nav-borderRadius"><input type="checkbox">Border Radius</li>
	                    </ul>
	                </div>
	                <div class="styles">
	                    <div id="holder" class="holder">
	                        <div>
	                            <h3>Styles</h3>
								<div id="stylePresets" class="border_box">
									
								</div>
	                        </div>
	                        <div id="dropShadow">
	                            <h3>Drop Shadow</h3>
	                            <label>Color:</label>
	                            <div>
	                                <div class="color_field"></div>
	                            </div>
	                            <label for="ds-opacity">Opacity:</label>
	                            <div>
	                                <div class="slider"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="opacity" id="ds-opacity" type="text" data-min="0" data-max="100" data-restrict="digits" value="75">
	                                %
	                            </div>
	                            <label class="angle_holder" for="ds-angle">Angle:</label>
	                            <div>
	                                <div class="pot"><div class="pointer"><div class="dot"></div><div class="line"></div></div></div>
	                                <div class="angle_holder">
	                                    <input class="angle" id="ds-angle" type="text" data-min="0" data-max="360" data-restrict="digits" value="90">
	                                    &deg;
	                                    <input type="checkbox" class="globalLight" id="ds-globalLight"><label for="ds-globalLight">Use Global Light</label>
	                                </div>
	                            </div>
	                            <label for="ds-distance">Distance:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="distance" id="ds-distance" type="text" data-min="0" data-max="100" value="1">
	                                px
	                            </div>
	                            <label for="ds-blur">Blur:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="blur" id="ds-blur" type="text" data-min="0" data-max="100" value="5">
	                                px
	                            </div>
	                            <label for="ds-size">Size:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="size" id="ds-size" type="text" data-min="0" data-max="255" value="0">
	                                px
	                            </div>
	                            <div class="clear"></div>
	                        </div>
							<div id="innerShadow">
	                            <h3>Inner Shadow</h3>
	                            <label>Color:</label>
	                            <div>
	                                <div class="color_field"></div>
	                            </div>
	                            <label for="is-opacity">Opacity:</label>
	                            <div>
	                                <div class="slider"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="opacity" id="is-opacity" type="text" data-min="0" data-max="100" data-restrict="digits" value="90">
	                                %
	                            </div>
	                            <label class="angle_holder" for="is-angle">Angle:</label>
	                            <div>
	                                <div class="pot"><div class="pointer"><div class="dot"></div><div class="line"></div></div></div>
	                                <div class="angle_holder">
	                                    <input class="angle" id="is-angle" type="text" data-min="0" data-max="360" data-restrict="digits" value="90">
	                                    &deg;
	                                    <input type="checkbox" class="globalLight" id="is-globalLight"><label for="is-globalLight">Use Global Light</label>
	                                </div>
	                            </div>
	                            <label for="is-distance">Distance:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="distance" id="is-distance" type="text" data-min="0" data-max="100" value="1">
	                                px
	                            </div>
	                            <label for="is-blur">Blur:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="blur" id="is-blur" type="text" data-min="0" data-max="100" value="0">
	                                px
	                            </div>
	                            <label for="is-size">Size:</label>
	                            <div>
	                                <div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="size" id="is-size" type="text" data-min="0" data-max="255" value="0">
	                                px
	                            </div>
	                            <div class="clear"></div>
	                        </div>
	                        <div id="background">
	                            <h3>Background</h3>
								<label for="bg-opacity">Opacity:</label>
	                            <div>
	                                <div class="slider"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="opacity" id="bg-opacity" type="text" data-min="0" data-max="100" value="100">
	                                %
	                            </div>
								<label>Gradient</label>
								<div>
									<div class="gradientField"></div>
									<input type="checkbox" class="reverse" id="bg-reverse"><label for="bg-reverse">Reverse</label>
								</div>
								<label>Style</label>
								<div>
									<select id="background_style">
										<option value="linear">Linear</option>
										<option value="reflected">Reflected</option>
										<option value="contain">Radial - contain</option>
										<option value="cover">Radial - cover</option>
									</select>
								</div>
	                            <label class="angle_holder" for="bg-angle">Angle:</label>
	                            <div>
	                                <div class="pot"><div class="pointer"><div class="dot"></div><div class="line"></div></div></div>
	                                <div class="angle_holder">
	                                    <input class="angle" id="bg-angle" type="text" data-min="0" data-max="360" value="90">
	                                    &deg;
	                                    <input type="checkbox" class="globalLight" id="bg-globalLight"><label for="bg-globalLight">Use Global Light</label>
	                                </div>
	                            </div>
		                       	<div class="clear"></div>
	                        </div>
							<div id="border">
	                            <h3>Border</h3>
								<label>Color:</label>
	                            <div>
	                                <div class="color_field"></div>
	                            </div>
	                            <label for="bd-opacity">Opacity:</label>
	                            <div>
	                                <div class="slider"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="opacity" id="bd-opacity" type="text" data-min="0" data-max="100" value="100">
	                                %
	                            </div>
	                            <label for="bd-size">Size:</label>
	                            <div>
	                                <div class="slider"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
	                                <input class="size" id="bd-size" type="text" data-min="0" data-max="10" value="1">
	                                px
	                            </div>
	                            <label>Style:</label>
	                            <div id="border_styles" class="previews">
									<div id="border_style_solid" title="solid" data-style="solid" class="active"></div>
									<div id="border_style_dashed" title="dashed" data-style="dashed"></div>
									<div id="border_style_dotted" title="dotted" data-style="dotted"></div>
									<div id="border_style_double" title="double" data-style="double"></div>
	                            </div>
	                            <div class="clear"></div>
	                        </div><!-- /border -->
							<div id="borderRadius">
	                            <h3>Border Radius</h3>
								<label for="br-radius">Radius:</label>
								<div>
									<div class="slider" data-easing="true"><div class="bar"></div><div class="arrow"><div class="spike"></div><div class="rear"></div></div></div>
									<input class="radius" id="br-radius" type="text" data-min="0" data-max="200" value="0">
	                                <span class="options" id="border_radius_unit"><span id="border_radius_pixel" data-unit="px" class="active">px</span><span id="border_radius_percent" data-unit="%">%</span></span>
								</div>
								<label>Corners:</label>
								<div id="border_radius_preview">
									<div id="topLeft" class="active"></div>
									<div id="topRight" class="active"></div>
									<div id="bottomRight" class="active"></div>
									<div id="bottomLeft" class="active"></div>
								</div>
								<div class="clear"></div>
							</div>
	                    </div>
	                </div>
	                <div class="clear"></div>
	            </div>
	            <div class="controls">
	                <button id="ok">OK</button>
	                <button id="cancel">Cancel</button>
	                <button id="new_style">New Style...</button>
	            </div>
			</div>
        </div>
		<div id="gradient_editor" class="window">
			<div class="head moveable">
				<h2>Gradient Editor</h2>
			</div>
			<div class="body">
	           <div class="static_right">
	                <div class="main">
	                    <div class="holder">
	                        <h3>Presets</h3>
	                        <div id="gradient_presets_holder" class="border_box">
	                            <div id="gradient_presets">
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="controls sidebar">
	                    <button id="gradient_ok">OK</button>
	                    <button id="gradient_cancel">Cancel</button>
	                </div>
	                <div class="clear"></div>
	            </div>
	            <div class="static_right">
	                <div class="main">
	                    <div class="static_left">
	                        <span>Name:</span><input id="gradient_name" type="text">
	                    </div>
	                </div>
	                <div class="controls sidebar">
	                    <button id="gradient_new">New</button>
	                </div>
	                <div class="clear"></div>
	            </div>
	            <div class="holder">
	                <h3>Gradient</h3>
	                <div id="gradient_holder">
	                    <div class="frame">
	                        <div id="gradient">
	                        </div>
	                    </div>
	                </div>
	                <div id="stops" class="holder">
	                    <h3>Stops</h3>
	                    <div id="color_stops">
	                        <div class="disabled">
	                            <span>Color:</span><div id="stop_color" class="color_field"></div>
	                        </div>
	                        <div class="disabled">
	                            <label for="stop_location">Location:</label>
									<input type="text" id="stop_location" data-min="0" data-max="100" data-restrict="digits" disabled="disabled">%
	                        </div>
	                        <button id="remove_stop" disabled="disabled">Delete</button>
	                    </div>
	                </div>
	            </div>
	        </div>
		</div>
		<div id="colorpicker" class="window">
			<div class="head moveable">
				<h2>Colorpicker</h2>
			</div>
			<div class="body">
            	<div class="main">
	                <div id="color_field" class="border_box">
	                    <canvas id="field" width="256" height="256"></canvas>
	                    <canvas id="circle" class="colorcircle" width="256" height="256"></canvas>
	                </div> 
	                <div id="color_slider">
	                    <canvas class="border_box" width="19" height="256"></canvas>
	                    <div>
	                        <div class="arrow left"><div class="spike"></div><div class="rear"></div></div>
	                        <div class="arrow right"><div class="spike"></div><div class="rear"></div></div>
	                    </div>
	                </div>
	                <div class="color_preview lightbox">
	                    <label>new</label>
	                    <div id="new_color"></div>
	                    <label>current</label>
	                    <div id="current_color"></div>
	                </div>
	                <div class="color_inputs">
	                    <ul>
	                        <li>
								<input type="radio" id="hsb_h-radio" name="color" value="hsb_h">
								<label for="hsb_h-radio">H:</label>
								<input id="hsb_h" type="text" data-min="0" data-max="360" data-restrict="digits" value="0">
								&deg;
							</li>
	                        <li>
								<input type="radio" id="hsb_s-radio" name="color" value="hsb_s">
								<label for="hsb_s-radio">S:</label>
								<input id="hsb_s" type="text" data-min="0" data-max="100" data-restrict="digits" value="0">
								%
							</li>
	                        <li>
								<input type="radio" id="hsb_b-radio" name="color" value="hsb_b" checked="checked">
								<label for="hsb_b-radio">B:</label>
								<input id="hsb_b" type="text" data-min="0" data-max="100" data-restrict="digits" value="0">
								%
							</li>
	                    </ul>
	                    <ul>
	                        <li>
								<input type="radio" id="rgb_r-radio" name="color" value="rgb_r">
								<label for="rgb_r-radio">R:</label>
								<input id="rgb_r" type="text" data-min="0" data-max="255" data-restrict="digits" value="0">
							</li>
	                        <li>
								<input type="radio" id="rgb_g-radio" name="color" value="rgb_g">
								<label for="rgb_g-radio">G:</label>
								<input id="rgb_g" type="text" data-min="0" data-max="255" data-restrict="digits" value="0">
							</li>
	                        <li>
								<input type="radio" id="rgb_b-radio" name="color" value="rgb_b">
								<label for="rgb_b-radio">B:</label>
								<input id="rgb_b" type="text" data-min="0" data-max="255" data-restrict="digits" value="0">
							</li>
	                    </ul>
	                    <div id="hex_holder">
							<label for="hex">#</label>
							<input type="text" id="hex" size="10" maxlength="6" data-restrict="hexcode">
						</div>
	                </div>
	            </div>
	            <div class="controls">
	                <button id="color_ok">OK</button>
	                <button id="color_cancel">Cancel</button>
	                <button id="color_add">Add to Swatches</button>
	                <div id="swatches_holder">
	                    <div id="swatches" class="paint_bucket">
	                    </div>
	                </div>
	            </div>
	        </div>
		</div><!-- /ColorPicker -->
	</div> <!-- /LayerStyle -->
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript" src="js/localization.js"></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/numbers.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/css.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/gradienteditor.js"></script>
<script type="text/javascript" src="js/codebox.js"></script>
<script type="text/javascript" src="js/universe.js"></script>
<script type="text/javascript" src="js/styleStore.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>